<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div class="Policy">
    <!-- {{ Policy_list }} -->
    <template v-if="Policy_list.length>0">
      <div class="Policy_box">
        <div v-for="item in Policy_list" :key="item" class="Policy_item">
          <!-- {{ item }} -->
          <!-- <h3>景点名字</h3> -->
          <div class="Policy_user">
            <h3 class="Policy_title1">优惠对象:</h3>
            <p class="Policy_data">{{ item.PREFERENTIAL }}</p>
          </div>
          <div class="Policy_info">
            <h3 class="Policy_title2">优惠政策:</h3>
            <p class="Policy_data">{{ item.PREFERENTIAL_DESC }}</p>
          </div>
        </div>
      </div>
      <div class="more_data">
        <el-button type="primary" :loading-icon="Eleme" @click="load2" :loading="loading">加载更多</el-button>
      </div>
    </template>
    <template v-else>
      <div class="empty_box">
        <!-- 目前暂时无优惠 -->
        <el-empty description="空" :image-size="200">很抱歉，该景点无优惠补贴</el-empty>
      </div>
    </template>
    <!-- <el-empty description="description" v-else /> -->
  </div>
</template>
    
    <script setup lang="ts">
import { Eleme } from "@element-plus/icons-vue";
import { getPolicy } from "@/request/analysis";
let page = ref(1);
let Policy_list = ref([]);
const loading = ref(false);

const load2 = async () => {
  loading.value = true;
  page.value += 1;
  await getPolicy({
    list_id: props.city_id_list,
    page: page.value
  }).then(({ data }) => {
    data.forEach(item => {
      Policy_list.value.push(item);
    });
    loading.value = false;
  });
};
const props = defineProps<{
  city_id_list: String;
}>();
const get_data = async (item: any) => {
  await getPolicy({
    page: page.value,
    list_id: item
    // list_id: 272
  }).then(({ data }) => {
    console.log(data);
    console.log("优惠");
    
    Policy_list.value = data;
  });
};
// const parent: any = ref(props.name);
watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      get_data(newValue);
    }
  }
);

</script>
    
    <style lang="scss" scoped>
.Policy {
  // background-color: rgb(80, 95, 90);
  display: flex;
  flex-direction: column;
  // flex-wrap: wrap;
  // justify-content: center;
  // height: 500px;
  // margin-bottom: 20px;
  // padding-bottom: 10px;
  // gap: 7px;
  .empty_box {
    text-align: center;
    margin: 0 auto;
  }
  .Policy_box {
    height: calc(73vh - 28px);
    overflow-y: scroll;
    width: 100%;
    // background-color: aqua;
  }
  .Policy_item {
    // width: 100%;
    border: 3px rgb(0, 255, 170) solid;
    height: auto;
          background-color: rgba(255, 207, 207, 0.9);

    // display: flex;
    // flex-direction: column;
    margin-bottom: 20px;
    float: left;
    .Policy_user {
      display: flex;
      flex-direction: row;
      width: 100%;
      float: left;

      .Policy_title1 {
        font-size: 15px;
        width: 100px;
        // background-color: aqua;
        flex: 1;
      }
      .Policy_data {
        flex: 3;
        color: rgb(0, 255, 255);
      }
      // background-color: antiquewhite;
    }
    .Policy_info {
      display: flex;
      flex-direction: row;
      width: 100%;
      float: left;
      .Policy_title2 {
        font-size: 15px;
        width: 100px;
        // background-color: aqua;
        flex: 1;
      }
      .Policy_data {
        flex: 3;
      }
    }
  }
  .more_data {
    // padding-top: 5px;
    height: 40px;
    width: 100%;
    background-color: aquamarine;
    .el-button {
      width: 100%;
      height: 100%;
    }
  }
}
</style>